<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p class="p1" id="p2">下午好</p>
	<ul>
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li>
	</ul>

	<form name="form1">
		用户名：<input type="text" name="uname" value="">
	</form>

	<script type="text/javascript">
		// 获取单个
		var p = document.querySelector('p')
		var p1 = document.querySelector('.p1')
		var p2 = document.querySelector('#p2')

		var li = document.querySelector('ul li')
		console.log(p)
		console.log(p1)
		console.log(p2)
		console.log(li)

		// 获取多个
		var lis = document.querySelectorAll('ul li')
		console.log(lis)

		// id
		var pId = document.getElementById('p2')
		console.log(pId)
		// class // 数组
		var pClass = document.getElementsByClassName('p1')
		console.log(pClass[0])
		// tagName // 数组
		var pTagName = document.getElementsByTagName('p')
		console.log(pTagName['p2'])
		// name // 数组
		var form = document.getElementsByName('form1') 
		var uname = document.getElementsByName('uname') 
		console.log(form)
		console.log(uname)
		
	</script>
</body>
</html>